<template>
  <div>
    <!-- <authorizableScope :tree-data="data" :title1="'可授权范围1'" :title2="'可授权范围2'" /> -->
    <div style="width:50%;padding: 20px;">
      <dtSelectApply
        ref="treeTransfer"
        v-model="value"
        :select-data="data"
        :default-props="defaultProps"
        @getChecked="handleGetChecked"
      />
    </div>
    <div style="width:50%;padding: 20px;">
      <dtSelectOrg ref="orgPicker" v-model="orgValue" :tag-visible="false" @getSelectData="handleGetSelectData" @input="handleInput" />
    </div>
    <el-button type="primary" round size="small" icon="el-icon-user" @click="$refs.personPicker.show()">选人</el-button>
    <el-button type="primary" round size="small" icon="el-icon-user" @click="$refs.orgPicker.handleSelectOrg()">选组织</el-button>
    <el-button type="primary" round size="small" icon="el-icon-user" @click="$refs.rolePicker.handleSelectPerson()">选角色</el-button>
    <el-button type="primary" round size="small" icon="el-icon-user" @click="handleSet">赋值</el-button>
    <div style="width:50%;">
      <personSelect ref="personPicker" v-model="personValue" :tag-visible="false" :selected-data="select" @input="handlePersonInput" @ok="selected" />
      <dtSelectOrgDialog ref="orgPicker" v-model="orgValue" :tag-visible="false" @input="handleInput" />
      <dtSelectRole ref="rolePicker" v-model="roleValue" :api="roleApi" :tag-visible="false" @input="handleInput" />
    </div>
  </div>
</template>

<script>
import roleApi from '@/framework/api/addRole'
import dtSelectApply from '@/framework/components/addPerson/dt-select-apply.vue'
import dtSelectOrgDialog from '@/framework/components/addPerson/dt-select-org-dialog'
import dtSelectOrg from '@/framework/components/addPerson/dt-select-org'
import dtSelectRole from '@/framework/components/addPerson/dt-select-role'
export default {
  components: {
    dtSelectApply,
    dtSelectOrg,
    dtSelectOrgDialog,
    dtSelectRole
  },
  data() {
    return {
      roleApi: roleApi,
      personMock: '15000019881204181X,620000201401066788,540000200411031277,500000202105143782,360000201504078526,820000200706016629',
      roleValue: '',
      personValue: '',
      orgValue: '',
      select: [],
      data: [],
      leftChecked: [],
      value: '',
      transferData: [
        {
          id: '1',
          pid: 0,
          label: '一级 1',
          children: [
            {
              id: '1-1',
              pid: '1',
              label: '二级 1-1',
              children: []
            },
            {
              id: '1-2',
              pid: '1',
              label: '二级 1-2',
              children: [
                {
                  id: '1-2-1',
                  pid: '1-2',
                  children: [],
                  label: '二级 1-2-1'
                },
                {
                  id: '1-2-2',
                  pid: '1-2',
                  children: [
                    {
                      id: '1-3-1',
                      pid: '1-2-2',
                      children: [],
                      label: '三级 1-3-1'
                    },
                    {
                      id: '1-3-2',
                      pid: '1-2-2',
                      children: [],
                      label: '三级 1-3-2'
                    }
                  ],
                  label: '二级 1-2-2'
                }
              ]
            }
          ]
        }
      ],
      defaultProps: {
        children: 'children',
        label: 'label'
      }

    }
  },
  created() {
    // this.data = [{
    //   id: 1,
    //   label: '一级 1',
    //   children: [{
    //     id: 4,
    //     label: '二级 1-1',
    //     children: [{
    //       id: 9,
    //       label: '三级 1-1-1'
    //     }, {
    //       id: 10,
    //       label: '三级 1-1-2'
    //     }]
    //   }]
    // }, {
    //   id: 2,
    //   label: '一级 2',
    //   children: [{
    //     id: 5,
    //     label: '二级 2-1'
    //   }, {
    //     id: 6,
    //     label: '二级 2-2'
    //   }]
    // }, {
    //   id: 3,
    //   label: '一级 3',
    //   children: [{
    //     id: 7,
    //     label: '二级 3-1'
    //   }, {
    //     id: 8,
    //     label: '二级 3-2'
    //   }]
    // }]
  },
  mounted() {

  },
  methods: {
    handleGetSelectData(selectData) {
      console.log('selectData', selectData)
    },
    handleGetChecked(nodes) {
      console.log('value', this.value)
      console.log('nodes', nodes)
    },
    handleSet() {
      this.personValue = this.personMock
    },
    handleInput() {
      console.log('orgValue', this.orgValue)
      console.log('roleValue', this.roleValue)
    },
    handlePersonInput() {
      console.log('personValue', this.personValue)
      console.log('select', this.select)
    },
    selected(select) {
      this.select = select
    },
    transferChange(type) {
      console.log(1111, type)
      this.leftChecked = []
    }
  }

}
</script>
